<template>
  <section>
    <el-table :data="dataList" v-loading="logLoading" @selection-change="selsChange">
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column type="index" width="50" header-align="center" align="center"></el-table-column>
      <el-table-column prop="username" label="用户"></el-table-column>
      <el-table-column prop="model" label="模块名称"></el-table-column>
      <el-table-column prop="operation" label="用户操作"></el-table-column>
      <el-table-column prop="method" label="请求方法"></el-table-column>
      <el-table-column prop="params" label="请求参数" min-width="200"></el-table-column>
      <el-table-column prop="ip" label="IP地址"></el-table-column>
      <el-table-column prop="createDate" label="执行时间"></el-table-column>
      <el-table-column prop="time" label="时长(ms)"></el-table-column>
      <el-table-column prop="exeState" label="执行结果"></el-table-column>
    </el-table>

    <el-col :span="24" class="toolbar">
      <el-button type="danger" @click="batchRemove" :disabled="this.sels.length==0">批量删除</el-button>
      <el-pagination layout="total, sizes, prev, pager, next, jumper"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :page-sizes="pageSizes"
                     :page-size="pageSize" :total="total" style="float:right;">
      </el-pagination>
    </el-col>
  </section>
</template>

<script>
  import API from '@/api'

  export default {
    name: "index",
    data(){
      return {
        dataList:[],
        logLoading:false,
        sels:[],
        pageSize:10,
        pageSizes:[5,10,20,50],
        pageIndex:1,
        total:0,
      }
    },
    methods:{
      handleSizeChange(val){
        this.pageSize = val;
        this.getLogList();
      },
      handleCurrentChange(val){
        this.pageIndex = val;
        this.getLogList();
      },
      getLogList(){
        this.logLoading = true;
        let params = {
          page:this.pageIndex,
          limit:this.pageSize,
        };
        API.sysLog.list(params).then(res=>{
          console.log(res.data);
          if(!res.data.code){
            this.dataList = res.data.page.list;
            this.total = res.data.page.totalCount;
            this.logLoading = false;
          }else {
            this.$message.error(res.data.msg);
          }
        }).catch(error=>{
          console.error(error);
        })
      },
      batchRemove(){
        this.$confirm('此操作将永久删除这些配置信息，是否继续','警告',{
          confirmButtonText:'确定',
          cancelButtonText:'取消',
          type:'warning'
        }).then(()=>{
          this.idList = this.sels.map(item=>item.id).toString().split(",");
          console.log(this.idList);
        API.sysLog.remove(this.idList).then((res)=>{
          console.log(res.data.code);
          if(!res.data.code){
          this.$message({
            message:"删除成功",
            type:"success"
          });
            this.getLogList();
        }else{
          this.$message.error(res.data.msg);
        }
      }).catch(error=>{
          console.error(error);
      })
      })
      },
      selsChange(value){
        this.sels = value;
      }
    },
    mounted(){
      this.getLogList();
    }
  }
</script>

<style scoped>

</style>
